<template>
  <div>
    <div class="tlheader" style="position: relative">
      <div style="float: left">
        <img
          :src="this.playlist.coverImgUrl"
          alt=""
          style="width: 150px; height: 150px"
        />
      </div>

      <h4
        style="
          display:block
          margin-left: 10px;
          position: absolute;
          left: 180px;
          font-size: 20px;
        "
      >
        {{ this.playlist.name }}
      </h4>
      <p style="position: absolute; top: 30px; left: 180px; font-size: 12px">
        <i class="el-icon-pie-chart"></i> 最近更新：04月27日(每日更新)
      </p>
      <span style="position: absolute; top: 80px; left: 180px; font-size: 12px">
        <el-button type="primary" @click="playMusic(privileges[0].id)">播放</el-button></span
      >
      <span style="position: absolute; top: 80px; left: 300px; font-size: 12px">
        <el-button>下载</el-button></span
      >
      <span style="position: absolute; top: 80px; left: 420px; font-size: 12px">
        <el-button>收藏</el-button></span
      >
    </div>
    <div class="tlfooter">
      <div class="tlfooter_title">
        <h3><span>歌曲列表</span></h3>
      </div>
      <div class="tlfooter_main">
        <table class="tctable">
          <thead>
            <tr style="width: 669px">
              <th style="width: 78px"></th>
              <th style="width: 327px">标题</th>
              <th style="width: 91px">时长</th>
              <th style="width: 173px">歌手</th>
            </tr>
          </thead>
          <thead v-for="(item, index) in privileges">
            <tr
              :class="{ active: index <= 2, active1: index % 2 == 0 }"
              v-if="index <= 99"
            >
              <th>{{ index + 1 }}</th>
              <th>
                <img
                  v-if="index <= 2"
                  :src="item.al.picUrl"
                  alt=""
                  width="50px"
                  height="50px"
                />

                <span style="cursor: pointer" @click="toLyric(item.id)">
                  {{ item.name }}</span
                >
              </th>
              <th>3:10</th>
              <th style="cursor: pointer" @click="toArtist(item.ar[0].id)">
                {{ item.ar[0].name }}
              </th>
            </tr>
          </thead>
        </table>
        <div class="tlfooter_title" style="margin-top: 40px">
          <!-- <h3><span>歌曲列表</span></h3> -->
          <div class="tlfooter_title" style="margin-top: 40px">
            <h5><span>精彩评论</span></h5>
          </div>
          <ul>
                <li v-for="items in tlcomment" style="border-bottom:1px solid rgb(230,230,230);margin-top:8px">
                  <img :src="items.user.avatarUrl" alt="" width="50px;height:50px">
                  <span class="skyblue">{{ items.user.nickname }}</span> :
                  {{ items.content }}
                </li>
              </ul>
        </div>
      </div>
    </div>
     <div class="player">
      <!-- autoplay 自动播放 -->
      <audio :src="musicUrl" controls autoplay class="player_audio" ></audio>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { gettlcomment } from "@/network/discover.js"
export default {
  name: "biaosheng",
  data() {
    return {
      playlist: {},
      privileges: [],
      tlcomment:[],
     musicUrl:''

    };
  },
  created() {
    axios({
      url: "http://localhost:3000/playlist/detail",
      method: "get",
      params: {
        id: 19723756,
      },
    }).then((res) => {
      console.log(res);
      this.playlist = res.data.playlist;

      this.privileges = res.data.playlist.tracks;
      console.log(this.privileges);
    });
     gettlcomment().then(res=>{
               for(var n=0;n<=19;n++){
                 //  this.dislist[l]=res.playlist.tracks.name[l]}
  this.tlcomment.push(res.comments[n])
                     
    }
   })
  }

};
</script>